<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>accountbar</title>
</head>
<body>
<div th:fragment="navigation">

    <div class="container">
        <div class="sixteen columns">

            <a href="#menu" class="menu-trigger"><i class="fa fa-bars"></i> 目录</a>

            <nav id="navigation">
                <ul class="menu" id="responsive">

                    <li><a href="index.html" th:href="@{/index}" class="current homepage" id="current">首页</a></li>

                    <li class="dropdown">
                        <a href="#">萌宠网</a>
                        <ul>
                            <li><a href="#">商城介绍</a></li>
                            <li><a th:href="@{/items}">全部商品</a></li>
                        </ul>
                    </li>


                    <li>
                        <a href="#">商品分类</a>
                        <div class="mega">
                            <div class="mega-container">

                                <div class="one-column">
                                    <ul>
                                        <li><span class="mega-headline">宠物</span></li>
                                        <li><a th:href="@{/items/category1}">狗类</a></li>
                                        <li><a th:href="@{/items/category2}">猫类</a></li>
                                        <li><a th:href="@{/items/category3}">兔类</a></li>
                                        <li><a th:href="@{/items/category4}">鸟类</a></li>
                                        <li><a th:href="@{/items/category5}">其他种类</a></li>
                                    </ul>
                                </div>

                                <div class="one-column">
                                    <ul>
                                        <li><span class="mega-headline">相关商品</span></li>
                                        <li><a th:href="@{/items/category6}">饲料</a></li>
                                        <li><a th:href="@{/items/category7}">洗漱用品</a></li>
                                        <li><a th:href="@{/items/category8}">宠物服饰</a></li>
                                        <li><a th:href="@{/items/category9}">宠物居屋</a></li>
                                        <li><a th:href="@{/items/category10}">其他商品</a></li>
                                    </ul>
                                </div>

                                <div class="one-fourth-column hidden-on-mobile">
                                    <a href="#" class="img-caption margin-reset">
                                        <figure>
                                            <img src="images/ad/p_animal.jpg" th:src="@{/images/ad/p_animal.jpg}" alt="" />
                                            <figcaption>
                                                <h3>可爱宠物</h3>
                                                <span></span>
                                            </figcaption>
                                        </figure>
                                    </a>
                                </div>

                                <div class="one-fourth-column hidden-on-mobile">
                                    <a href="#" class="img-caption margin-reset">
                                        <figure>
                                            <img src="images/ad/p_product.jpg" th:src="@{/images/ad/p_product.jpg}" alt="" />
                                            <figcaption>
                                                <h3>品质商品</h3>
                                                <span></span>
                                            </figcaption>
                                        </figure>
                                    </a>
                                </div>

                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </li>


                    <li class="dropdown">
                        <a href="#">发现</a>
                        <ul>
                            <li><a href="#">宠物头条</a></li>
                            <li><a href="#">大牌推荐</a></li>
                            <li><a href="#">论坛</a></li>
                        </ul>
                    </li>


                    <li class="demo-button">
                        <a href="#">积分商城</a>
                    </li>


                    <li class="demo-button">
                        <a href="#">服务</a>
                    </li>

                </ul>
            </nav>
        </div>
    </div>

</div>
</body>
</html>